<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 精选题库 -->
      <div class="top-cue">
        <span class="">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          size="small"
          class="addbtn"
           @click="gotoQuestionsInput"
        >
            <i class="el-icon-edit"></i>
            新增试题
        </el-button>
      </div>

      <el-form
        :inline="true"
        v-model="basisRuleForm"
      >
        <el-form-item label="学科" label-width="80px">
          <el-select
            v-model="basisRuleForm.subjectID"
            placeholder="请选择"
            class="input-width"
            @change="getSubjectID"
          >
            <el-option
              v-for="(type, i) in subjectsType"
              :key="i"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="二级目录" label-width="80px">
          <el-select
            v-model="basisRuleForm.catalogID"
            placeholder="请选择"
            class="input-width"
          >
             <el-option
              v-for="(item, i) in LabelList"
              :key="i"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="标签" label-width="80px">
          <el-select
            v-model="basisRuleForm.tags"
            placeholder="请选择"
            class="input-width"
          >
            <el-option
              v-for="(item, i) in catalogList"
              :key="i"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="关键字" label-width="80px">
          <el-input
            v-model="basisRuleForm.keyword"
            class="input-width"
          />
        </el-form-item>

        <el-form-item label="试题类型" label-width="80px">
          <el-select
            v-model="basisRuleForm.questionType"
            placeholder="请选择"
            class="input-width"
          >
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="难度" label-width="80px">
          <el-select
            v-model="basisRuleForm.difficulty"
            placeholder="请选择"
            class="input-width"
          >
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向" label-width="80px">
          <el-select
            v-model="basisRuleForm.direction"
            placeholder="请选择"
            class="input-width"
          >
           <el-option
              v-for="(item, i) in direction"
              :key="i"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="录入人" label-width="80px">
          <el-select
            v-model="basisRuleForm.creatorID"
            placeholder="请选择"
            class="input-width"
          >
            <el-option label="禁用" value="1"></el-option>
            <el-option label="启用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题目备注" label-width="80px">
          <el-input
            v-model="basisRuleForm.remarks"
            class="input-width"
          />
        </el-form-item>

        <el-form-item label="企业简称" label-width="80px">
          <el-input
            v-model="basisRuleForm.shortName"
            class="input-width"
          />
        </el-form-item>

        <el-form-item label="城市" label-width="80px" >
            <el-cascader
              v-model="basisRuleForm.province"
              :options="provinces"
              @change="Getprovince"
              style="width: 110px; margin-right: 10px;"
            />
            <el-cascader
              v-model="basisRuleForm.city"
              :options="citys"
              @change="GetCity"
              style="width: 110px"
            />
        </el-form-item>

        <el-form-item class="btns">
          <el-button @click="clear" size="mini">清除</el-button>
          <el-button type="primary" @click="search" size="mini">搜索</el-button>
        </el-form-item>

      </el-form>
    </div>

    <el-tabs type="card" value="first">
      <el-tab-pane label="全部" name="first">
        <div class="total">
          <i class="el-icon-info"><span class="total-font">共{{ choiceList.counts }}条记录</span></i>
        </div>
        <my-table
          :table-props="{
              data: choiceList.items,
              headerCellStyle: getRowClass
            }"
            :columns="[
              { label: '试题编号', prop: 'number', width: 150 },
              { label: '学科', prop: 'subject', width: 150},
              { label: '目录', prop: 'catalog', width: 100},
              { label: '题型', prop: 'questionType', width: 80},
              { label: '题干', prop: 'remarks', width: 80},
              { label: '录入时间', prop: 'addDate', width: 180},
              { label: '难度', prop: 'difficulty', width:  60},
              { label: '录入人', prop: 'creator', width: 100},
              { label: '审核状态', prop: 'chkState', width: 130},
              { label: '审核意见', prop: 'chkRemarks', width: 100},
              { label: '审核人', prop: 'chkUser', width: 100},
              { label: '发布状态', prop: 'publishState', w: 80},
              { label: '操作', slotName: 'operators', width: 240, fixed: 'right'}
            ]"
            :pagination-props="{
              pageSize: pageSize,
              pageSizes: [5, 10, 15, 20],
              background: true,
              total: choiceList.counts,
              layout: '->, prev, pager, next, sizes, jumper'
            }"
            :pagination-events="events"
          >
        >
          <template v-slot:operators="scope">
            <el-button
              type="text"
              @click="preview(scope)"
            >
              预览
            </el-button>

            <el-button
              type="text"
            >
              审核
            </el-button>

            <el-button
              type="text"
            >
              修改
            </el-button>

            <el-button
              type="text"
            >
              上架
            </el-button>

            <el-button
              type="text"
            >
              删除
            </el-button>

          </template>
        </my-table>
      </el-tab-pane>

      <el-tab-pane label="待审核" name="second" @>
        <div class="total">
          <i class="el-icon-info"><span class="total-font">共{{ choiceList.counts }}条记录</span></i>
        </div>
        <my-table
          :table-props="{
              data: choiceList.items,
              headerCellStyle: getRowClass
            }"
            :columns="[
              { label: '试题编号', prop: 'number', width: 150 },
              { label: '学科', prop: 'subject', width: 150},
              { label: '目录', prop: 'catalog', width: 100},
              { label: '题型', prop: 'questionType', width: 80},
              { label: '题干', prop: 'remarks', width: 80},
              { label: '录入时间', prop: 'addDate', width: 180},
              { label: '难度', prop: 'difficulty', width:  60},
              { label: '录入人', prop: 'creator', width: 100},
              { label: '审核状态', prop: 'chkState', width: 130},
              { label: '审核意见', prop: 'chkRemarks', width: 100},
              { label: '审核人', prop: 'chkUser', width: 100},
              { label: '发布状态', prop: 'publishState', w: 80},
              { label: '操作', slotName: 'operators', width: 240, fixed: 'right'}
            ]"
            :pagination-props="{
              pageSize: pageSize,
              pageSizes: [5, 10, 15, 20],
              background: true,
              total: choiceList.counts,
              layout: '->, prev, pager, next, sizes, jumper'
            }"
            :pagination-events="events"
          >
        >
          <template v-slot:operators="scope">
            <el-button
              type="text"
            >
              预览
            </el-button>

            <el-button
              type="text"
            >
              审核
            </el-button>

            <el-button
              type="text"
            >
              修改
            </el-button>

            <el-button
              type="text"
            >
              上架
            </el-button>

            <el-button
              type="text"
            >
              删除
            </el-button>

          </template>
        </my-table>
      </el-tab-pane>
      <el-tab-pane label="已审核" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>

    <!-- 题目预览弹窗 -->
    <el-dialog
      :title= "edit ? '编辑用户' : '创建用户'"
      :visible.sync="questionsVisible"
      width="700px"
    >
      <el-row :gutter="20">
        <el-col :span="6"><div>【题型】:</div></el-col>
        <el-col :span="6"><div>【编号】:</div></el-col>
        <el-col :span="6"><div>【难度】:</div></el-col>
        <el-col :span="6"><div>【标签】:</div></el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="6"><div>【学科】:</div></el-col>
        <el-col :span="6"><div>【目录】:</div></el-col>
        <el-col :span="6"><div>【方向】:</div></el-col>
        <el-col :span="6"><div></div></el-col>
      </el-row>
      <hr>

      <div>【题干】:</div>
      <div></div>
      <div>单选题 选项: (以下选中的选项为正确答案)</div>
      <br>
      <!-- <div><el-radio v-model="radio" label="1"></el-radio></div>
      <br>
      <div><el-radio v-model="radio" label="1"></el-radio></div>
      <br>
      <div><el-radio v-model="radio" label="1"></el-radio></div>
      <br>
      <div><el-radio v-model="radio" label="1"></el-radio></div> -->

      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" @click="onAddUserOk">确定</el-button>
          <el-button @click="onAddUserClose">取消</el-button>
        </el-col>
      </el-row>

    </el-dialog>

    {{ detailList }}

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as cityApi from '@/api/hmmm/citys'
import * as constants from '@/api/hmmm/constants'

export default {
  name: 'QuestionsList',
  data () {
    return {
      events: {
        'current-change': this.onCurrentPageChange,
        'size-change': this.onPageSizeChange
      },
      basisRuleForm: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      provinces: [],
      citys: [],
      page: 1,
      pageSize: 5,
      addUserVisible: false,
      direction: '',
      questionsVisible: false
    }
  },
  computed: {
    ...mapState('questions', [
      'choiceList'
    ]),
    ...mapState('questions', [
      'detailList'
    ]),
    ...mapState('subjects', [
      'subjectsType'
    ]),
    ...mapState('tags', [
      'catalogList'
    ]),
    ...mapState('directorys', [
      'LabelList'
    ])
  },
  created () {
    this.updateChoiceList({
      page: this.page,
      pageSize: this.pageSize
    })
    this.direction = constants.direction
    // 学科选项
    this.updateSubjectsType()
    this.provinces = cityApi.provinces().map(d => ({
      value: d,
      label: d
    }))
  },
  methods: {
    ...mapActions('questions', [
      'updateChoiceList'
    ]),
    ...mapActions('questions', [
      'updateDetailList'
    ]),
    ...mapActions('subjects', [
      'updateSubjectsType'
    ]),
    ...mapActions('tags', [
      'updateCatalogList'
    ]),
    ...mapActions('directorys', [
      'updateLabelList'
    ]),
    Getprovince (value) {
      this.citys = cityApi.citys(value[0]).map(d => ({
        value: d,
        label: d
      }))
      this.basisRuleForm.province = value[0]
    },
    GetCity (value) {
      this.basisRuleForm.city = value[0]
    },
    // // 表单清除
    clear () {
      this.basisRuleForm = {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      }
    },
    // 搜索
    search () {
      let f = 0
      const form = {}
      for (const key in this.basisRuleForm) {
        if (this.basisRuleForm[key] !== '') {
          f = 1
          form[key] = this.basisRuleForm[key]
        }
      }
      if (f) {
        this.updateChoiceList({
          ...form,
          page: this.page,
          pageSize: this.pageSize
        })
      } else {
        this.updateChoiceList({
          page: this.page,
          pageSize: this.pageSize
        })
      }
    },
    // 修改按钮
    edit (value) {
      console.log(value)
    },
    // 当前页改变时
    onCurrentPageChange (currentPage) {
      this.page = currentPage
      this.updataCompanysList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    onPageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.updataCompanysList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    // 新增试卷
    gotoQuestionsInput () {
      this.$router.push({
        name: 'questions-new'
      })
    },
    onAddUserOk () {

    },
    onAddUserClose () {

    },
    getRowClass ({ rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f8f8f9; border-bottom: 2px solid #dcdcdc'
      }
    },
    getSubjectID (val) {
      this.updateCatalogList({ subjectID: val })
      this.updateLabelList({ subjectID: val })
    },
    // 预览
    preview ({ row }) {
      this.updateDetailList({ id: row.id })
      this.questionsVisible = true
    }
  }
}
</script>

<style lang="sass" scoped>
  .top-cue
    font-size: 12px
    color: #ffb1d1
    height: 50px
    .addbtn
      float: right
  .dashboard-container
    background-color: #fff
    padding: 20px
  .app-container
    padding: 0
  .input-width
    width: 230px
  .btns
    margin-right: 30px
    float: right
  .add
    float: right

  .total
    font-size: 14px
    background-color: #eee
    padding: 8px
    width: calc(100% - 8px)
    border-radius: 5px
    margin-bottom: 20px
    color: #666
    .total-font
      margin-left: 6px
</style>
